<template>
<div class="home-container">
    <el-container>
        <!-- 头部 -->
        <el-header>
            <img src="../assets/images/logo.png" alt>
            <h4>黑马程序后台管理系统</h4>
            <el-button type="info" @click="out">退出</el-button>
        </el-header>

        <el-container>
            <!-- 侧边导航栏 -->
            <el-aside :style="{width: iscollapse ? '65px' : '200px'}">
                <div class="toggleBar" @click="iscollapse=!iscollapse">|||</div>
                <!-- 总菜单栏 -->
                <el-menu :collapse="iscollapse" :collapse-transition="false" default-active="1" background-color="#545c64" text-color="#fff" :unique-opened="true" :router="true">
                    <!-- 第一子菜单 -->
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>用户管理</span>
                        </template>
                      <el-menu-item index="/users" :style="{width: iscollapse ? '65px' : '200px'}"><i class="el-icon-menu"></i>用户列表</el-menu-item>
                      <!-- <el-menu-item :index="subitem.path" v-for="subitem in menulist.children" :key="subitem.id"><i class="el-icon-menu"></i>用户列表</el-menu-item> -->
                    </el-submenu>
                    <!-- 第二子菜单 -->
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>权限管理</span>
                        </template>
                      <el-menu-item index="2-1"><i class="el-icon-menu"></i>用户权限</el-menu-item>
                      <el-menu-item index="2-2"><i class="el-icon-menu"></i>商品权限</el-menu-item>
                    </el-submenu>
                </el-menu>    
            </el-aside>

            <!-- 内容区域 -->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</div>
</template>

<script>
export default {
    data() {
        return {
            menu: [], // 侧边栏导航菜单列表数组
            iscollapse: false
        };
    },
    methods: {
        out() {
            // 清空浏览器中sessStroage中的token
            // 然后跳转到登录页面
            // sessionStorage.removeItem('token')
            this.$router.push("/login");
        },

        // 获取子菜单
        async getmenulist(){
           const {data: res} = await this.$http.get('menu')
           this.menu = res.data.message
        }
    }
};
</script>

<style lang="less" scoped>
.home-container {
    width: 100%;
    height: 100%;
}

.el-container {
    width: 100%;
    height: 100%;
}

.el-header {
    height: 70px;
    background-color: sandybrown;
    padding: 0;
    user-select: none;

    img {
        float: left;
    }

    h4 {
        float: left;
        margin-left: 20px;
        color: #fff;
    }

    .el-button {
        float: right;
        margin-right: 20px;
        margin-top: 9px;
    }
}

.el-aside {
    background-color: salmon;
    user-select: none;
}

.toggleBar {
    line-height: 26px;
    background-color: #eee;
    text-align: center;
    letter-spacing: 3px;
    cursor: pointer;
    user-select: none;
}
</style>
